<template>
    <view class="content">
        <div class="user-head">
            <image src="../../static/images/phone.png" class="phones"></image>
            <image src="../../static/images/user_head.png" mode="aspectFill" class="head_bage"></image>
            <div class="user">
                <image src="../../static/images/default_head.png" mode="aspectFill"></image>
                <div class="info">
                    <h1>{{data.shop_name}}</h1>
                    <b>审核中</b>
                </div>
            </div>
        </div>
        <div class="music">
            <image src="../../static/images/music.png" mode="aspectFit"></image>
        </div>
        <button class="exit-login" @tap="exitLogin" >退出登录</button>
        <footers />
    </view>
</template>

<script>
    import footers from '@/components/footers/index.vue'
    export default {
        components: {
            footers
        },
        data() {
            return {
                data : {}
            }
        },
        onShow() {

        },
        methods: {
            //退出登录
			exitLogin() {
				uni.showModal({
					title: '提示',
					content: '确定要注销登录？',
					success: function(res) {
						if (res.confirm) {
							uni.clearStorage();
							uni.clearStorageSync();
							uni.redirectTo({
								url: '../login/index'
							});
						}
					}
				})
			}
        },
    }
</script>
<style>
    page {
        background: #2d2d2d;
    }

    .head_bage {
        width: 100%;
        height: 400upx;
        position: absolute;
    }

    .phones {
        position: absolute;
        right: 30upx;
        top: 30upx;
        z-index: 1000;
        width:36upx;
        height:36upx;
    }

    .user {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 400upx;
        padding: 0 30upx;
        position: relative;
    }

    .user image {
        width: 120upx;
        height: 120upx;
        border-radius: 50%;
    }

    .user .info {
        flex: 1;
        margin: 0 25upx;

    }

    .user .info h1 {
        font-size: 34upx;
        margin-bottom: 15upx;
        color: #fff;
    }

    .user .info b {
        font-size: 20upx;
        color: #fff;
        background: #f821f8;
        padding: 6upx 0;
        width: 100upx;
        text-align: center;
        border-radius: 4upx;
    }

    .music image {
        width: 100%;
        opacity: 0.25;
    }

    .exit-login {
        width: 60%;
        display: block;
        margin: 0 auto;
        color: #a9a9a9;
        font-size: 28upx;
        background: #252525;
        height: 80upx;
        line-height: 80upx;
        margin-top: 30upx;
    }
</style>
